---
layout: default
title: "Sleek - Admin Dashboard Template"


parent: "documentation"
sub_parent: ""
activePage: "customization"
plugins: []
---
              <div class="row">
                <div class="col-lg-12">
                  <div class="card card-default text-dark">
                    <div class="card-header">
                      <h1>Customization</h1>
                    </div>
                    <div class="card-body pt-4">
                      <h2 class="mt-2 mb-2">File Structure</h2>
                      <p>Within the download you'll find the following directories and files:</p>

<pre class="border-0 mt-3">

|dist/ (Distrubution only)
|--- assets/
| |--- css/ (CSS files)
| |--- img/ (All images)
| |--- js/ (All images)
| |--- options/ (for theme option files)
| |--- plugins/ (for all necessary plugins)
| |--- scss/ (SCSS files)
|--- All html files (index.html, card.html etc.

</pre>
                      <h2 class="mt-5 mb-2">Customizing Style</h2>
                      <p>There are 2 basic ways to customize your theme...</p>

                      <h3 class="mt-4 mb-2">i. Compiled CSS</h3>
                      <p>If you want to use <em>Sleek Dashboard</em> "as is", or only need limited customization, feel free to simply include the compiled
                      <code>sleek.css</code> or <code>sleek.min.css</code> file located in the <code>dist/assets/css</code> directory.</p>

                      <h3 class="mt-4 mb-2">ii. Customizing SCSS</h3>
                      <p>This is more versatile and sustainable way to customize <em>Sleek Dashboard</em>. The 2 major benefits of this strategy are using
                      variable overrides (<code>_variables.scss</code>) to easily customize theme styles, plus you never have to touch
                      Bootstrap source, meaning future updates will be much, much, simpler.</p>


                      <div class="mt-5">
                        <a class="btn btn-square btn-primary float-left" href="/quick-start.html"><i
                            class="mdi mdi-chevron-left"></i> Quick Start</a>
                      </div>


                    </div>
                  </div>
                </div>
              </div>
